<template>
  <div class="box ">
     <div class="boxone">
       <span @click="fun">&lt;</span>
       <span>盒花夺宝</span>
       <button>攻略</button>
     </div>

      <div class="boxtow">
            <img src="image/SmallTown/hemaduobao_03.gif">
            <img src="image/SmallTown/hemaduobao_03.gif">
            <img src="image/SmallTown/hemaduobao_03.gif">
            <img src="image/SmallTown/hemaduobao_03.gif">
            <img src="image/SmallTown/hemaduobao_03.gif">
            <img src="image/SmallTown/hemaduobao_03.gif">
            <span>往期 &nbsp; &gt;</span>
      </div>
      <div class="top"></div>
       <hr>
           <smalldzi v-for="(v,i) in 10" :key="i"></smalldzi>
  </div>
   
</template>

<script>
import smalldzi from 'com/SmallTown/smalldzi'
export default {
    components:{
      smalldzi
    },
    methods:{
      fun(){
        this.$router.push("/SmallTown")
      }
    }
}
</script>
<style scoped>
  .top{
    width: 100%;
    height: 1.2rem;
  }

  .box{
    width: 100%;
   
   background-color: orange;
  }
  .boxone{
   height: 0.4rem;
   width: 100%;
   background-color:orange;
   position: fixed;
   top: 0;
  }
  .boxone span{
    line-height: 0.4rem;
     padding-left: 0.2rem;
     padding-right: 1.2rem;
     font-size:0.15rem;
     color:white; 
  }
  .boxone button{
    width:0.5rem; 
    border-radius: 0.1rem;
    border-style: none;
    background-color: green;
    color: white;
  }
 .boxtow{
    width: 96%;
    height: 0.5rem;
    border-radius: 0.1rem;
    background-color:white;
    display: flex;
    position: fixed;
     top: 0.4rem;
     margin-left: 0.08rem;

  }
  .boxtow img,span{
    line-height: 0.5rem;
    flex: 1;
  }
  .boxtow img{
    height:0.4rem ;
    width: 85%;
    margin-top: 0.05rem;
    margin-left: 0.1rem;
  }
  .boxtow span{
    margin-left: 0.2rem;
  }

</style>
   